<template>
  <MdEditor :value="value" @handle-change="onChange"></MdEditor>
  <CodeEditor :value="codeValue" :handle-change="onCodeChange"></CodeEditor>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
import MdEditor from "@/components/MdEditor.vue";
import { ref } from "vue";
import CodeEditor from "@/components/CodeEditor.vue"; // @ is an alias to /src

const value = ref()
const codeValue = ref()
const onChange = (v:string) =>{
  value.value = v
}
const onCodeChange = (v:string) =>{
  codeValue.value = v
}






</script>
